* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

// 更改鼠标选择的背景色
::selection {
  color: #fff;
  background: rgb(68, 233, 205);
}

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

// 新消息
.newNews {
  width: 230px;
  height: 40px;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3), 0 0 6px 2px rgba(0, 0, 0, 0.15);
  border-radius: 2px 0px 0px 2px;
  bottom: 0px;
  right: 0px;
  z-index: 200;
  user-select: none;

  .number {
    display: flex;
    position: absolute;
    left: 57px;
    top: -3px;

    .p1 {
      width: 8px;
      height: 16px;
      background-color: red;
      border-radius: 50px 0 0 50px;
      line-height: 16px;
      display: inline-block;
    }

    .p2 {
      height: 16px;
      background-color: red;
      color: #fff;
      line-height: 16px;
      font-size: 13px;
      display: inline-block;
    }

    .p3 {
      width: 8px;
      height: 16px;
      background-color: red;
      border-radius: 0 50px 50px 0;
      line-height: 20px;
      display: inline-block;
    }
  }

  img {
    width: 33px;
    height: 33px;
    margin-top: 3.5px;
    cursor: pointer;
    margin-left: 30px;
  }

  .newNewList {
    position: absolute;
    right: 60px;
    top: 10px;
  }
}

// 左上角更换背景图的图标
.RightSwitchImgBtn {
  position: fixed;
  top: 50px;
  right: 0px;
  z-index: 800;
  user-select: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.RightSwitchImgBtn:hover {
  width: 42px;
  height: 42px;
}

// 切换背景图的模态框
.switch-img {
  width: 100%;
  height: 300px;
  position: fixed;
  z-index: 150;
  user-select: none;

  ::-webkit-scrollbar {
    width: 4px;
    background-color: #ececec;
    border-radius: 4px;
  }

  /* 滚动滑块 */
  ::-webkit-scrollbar-thumb {
    background: #949494;
    border-radius: 4px;
  }

  .top {
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
    font-weight: 600;
  }

  .bottom {
    width: 100%;
    height: 460px;
    background-color: black;

    .imgs-1 {
      width: 610px;
      height: 140px;
      overflow: auto;
      margin: 0 auto;
      padding-top: 30px;
      cursor: pointer;

      .beijing-img {
        width: 106px;
        height: 60px;
        border: 2px solid #fff;
      }

      ::-webkit-scrollbar {
        width: 5px;
        background-color: #313131;
      }

      ::-webkit-scrollbar-thumb {
        background: #808080;
        border-radius: 2px;
      }
    }

    .al-btn-box {
      width: 170px;
      margin: 15px auto;

      // 保存按钮
      .preservation {
        width: 70px;
        height: 30px;
        background-color: #ff8140;
        border-radius: 2px;
        font-size: 14px;
        color: #fff;
        outline: none;
        border: none;
        cursor: pointer;
      }

      // 取消按钮
      .cancel {
        width: 70px;
        height: 30px;
        background-color: #ffffff;
        border-radius: 2px;
        font-size: 14px;
        outline: none;
        border: none;
        cursor: pointer;
        float: right;
        margin-left: 15px;
      }
    }
  }
}

// 整个大盒子
.big-box {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  z-index: 30;
  background-color: rgba(0, 0, 0, 0.1);

  // 左边内容
  .left {
    width: 150px;
    height: 100%;
    padding-top: 70px;
    position: fixed;
    user-select: none;

    ul {
      a {
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        line-height: 30px;

        li {
          list-style: none;
          padding-left: 22px;
        }

        li:hover {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }

  // 中间内容
  .middle {
    width: 600px;
    margin-left: 150px;

    .PublishBox {
      width: 600px;
      min-height: 175px;
      background-color: #ffffff;
      border-radius: 3px;
      margin-top: 70px;
      padding-bottom: 5px;

      .xin {
        font-size: 13px;
        color: #992b58;
        padding-top: 15px;
        margin-left: 13px;
        user-select: none;

        span {
          display: inline-block;
        }

        .xin-1 {
          font-size: 14px;
          font-weight: 600;
          transform: rotate(10deg);
        }

        .xin-2 {
          font-size: 16px;
          font-weight: 600;
          transform: rotate(-5deg);
        }

        .xin-3,
        .xin-4,
        .xin-5 {
          font-size: 13px;
          font-weight: 600;
          transform: rotate(-2deg);
        }

        .xin-6 {
          display: inline-block;
          font-size: 12px;
          font-weight: 600;
          transform: rotate(4deg);
        }

        .xin-7 {
          font-size: 12px;
          font-weight: 700;
          transform: rotate(-10deg);
        }

        .xin-8 {
          font-size: 12px;
          font-weight: 700;
          transform: rotate(10deg);
        }

        .xin-9 {
          font-size: 12px;
          font-weight: 600;
          transform: rotate(30deg);
        }

        .xin-10 {
          font-size: 18px;
          font-weight: 600;
        }

        .xin-11 {
          font-size: 14px;
          font-weight: 600;
          transform: rotate(-3deg);
        }

        .xin-12 {
          font-size: 18px;
          font-weight: 600;
          transform: rotate(5deg);
        }
      }

      // 文本框
      #textarea {
        width: 580px;
        height: 80px;
        margin: 11px 0 0 10px;
        font-size: 14px;
        font-family: "微软雅黑";
        padding: 8px;
        border-radius: 8px;
        resize: none;
        border: none;
        color: #333333;
        background-color: #f0f1f4;
        outline: none;
      }

      #textarea::-webkit-scrollbar {
        width: 7px;
        background-color: #f0f1f4;
      }

      #textarea::-webkit-scrollbar-thumb {
        background: rgb(190, 190, 190);
        border-radius: 4px;
      }

      #textarea:focus {
        background-color: #fff;
        border: 1px solid #ff8140;
      }

      .fabiao {
        line-height: 40px;
        margin-left: 10px;
        user-select: none;

        // 添加表情
        .AddEmoticons {
          display: inline-block;
          cursor: pointer;

          img {
            width: 20px;
            vertical-align: middle;
          }
        }

        // 承装所有表情的盒子
        .AddEmoticonsBox {
          width: 500px;
          position: absolute;
          display: none;
          box-shadow: 2px 2px 9px rgb(161, 161, 161);
          background-color: #fff;
          border-radius: 3px;

          .top {
            width: 100%;
            height: 45px;
            background-color: #eee;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .wordsSwitch {
              display: inline-block;
              font-size: 14px;
              cursor: pointer;
            }
          }

          // emoji 表情
          .expressionMenu {
            display: none;

            ul {
              list-style: none;
              width: 500px;
              display: flex;
              flex-wrap: wrap;

              li {
                width: 60px;
                height: 60px;
                cursor: pointer;
                user-select: none;
                display: flex;
                justify-content: space-around;
                align-items: center;
                font-size: 12px;
              }

              li:hover {
                background-color: rgb(243, 243, 243);
              }
            }
          }
        }

        // 添加图片
        .AddPicture {
          display: inline-block;
          margin-left: 15px;
          cursor: pointer;

          img {
            width: 20px;
            vertical-align: middle;
          }
        }

        // 选择了多少文件
        .documents {
          font-size: 12px;
          width: 200px;
          display: inline-block;
        }

        // 发布按钮
        .release-btn {
          width: 82px;
          height: 30px;
          background-color: #ff8140;
          border-radius: 2px;
          font-size: 13px;
          color: #fff;
          outline: none;
          border: none;
          cursor: pointer;
          float: right;
          margin: 10px 10px 0 0;
        }

        .previewPicturesBox {
          .previewPictures {
            width: 77px;
            height: 77px;
            border-radius: 10px;
            padding: 5px;
          }
        }
      }
    }

    // 导航栏
    .navigation-bar {
      width: 600px;
      height: 38px;
      background-color: #ffffff;
      border-radius: 3px;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      line-height: 38px;
      user-select: none;

      a {
        width: 120px;
        height: 38px;
        display: inline-block;
        text-align: center;
      }

      a:hover {
        color: #ff8140;
      }
    }
  }

  // 右边内容
  .right {
    width: 230px;
    height: 165px;
    background-color: #ffffff;
    border-radius: 3px;
    position: fixed;
    margin-left: 760px;
    margin-top: 70px;
    user-select: none;

    // 上方的背景图盒子
    .background {
      width: 230px;
      height: 75px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;

      .img-box {
        width: 66px;
        margin: auto;
        padding-top: 29px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          border: 3px solid rgba(255, 255, 255, 0.6);
        }
      }
    }

    // 昵称
    .nickname {
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      margin-top: 25px;
    }

    .data-box {
      width: 230px;
      display: flex;
      margin-top: 5px;

      // 关注和粉丝
      .topOption {
        width: 110px;
        height: 35px;
        border-right: 1px solid #d9d9d9;
        text-align: center;
        cursor: pointer;
        user-select: none;
      }

      a {
        display: inline-block;
        width: 110px;
        height: 55px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #000;
      }

      span {
        font-size: 16px;
        font-weight: 600;
      }

      p {
        font-size: 12px;
        color: #919191;
      }
    }

    // 右边选项卡
    .right-option {
      width: 230px;
      height: 300px;
      background-color: #ffffff;
      border-radius: 3px;
      display: none;
      overflow-y: auto;
      z-index: 100;

      // 滚动条
      ::-webkit-scrollbar {
        width: 5px;
        background-color: #ffffff;
      }

      // 滚动滑块
      ::-webkit-scrollbar-thumb {
        background: #d8d8d8;
        border-radius: 2px;
      }

      .right-option-p {
        font-size: 13px;
        font-weight: 700;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
      }

      // 模拟数据
      .mydataBox {
        width: 210px;
        height: 55px;
        margin: auto;
        border-bottom: 1px solid rgb(196, 196, 196);
        display: flex;
        align-items: center;

        .mydataBoxA {
          margin-left: 15px;
          width: 45px;
          height: 45px;

          .userImg {
            width: 45px;
            height: 45px;
            border-radius: 50%;
          }
        }

        .mydataBoxB {
          height: 45px;
          width: 200px;

          .NickName {
            font-size: 15px;
            font-weight: 600;
            margin-left: 10px;
            color: #353535;
            line-height: 25px;
          }

          // 住址
          .address {
            font-size: 12px;
            margin-left: 10px;
            color: #6b6b6b;
            cursor: default;
            display: inline-block;
          }
        }
      }
    }
  }
}

//当页面宽度小于1000时
@media screen and (max-width: 1020px) {
  .big-box {
    width: 760px;
  }

  .big-box .right {
    display: none;
  }
}

// 当页面宽度小于800时
@media screen and (max-width: 800px) {
  .big-box {
    width: 611px;
    padding-left: 15px;
  }

  .big-box .middle {
    margin-left: 0px;
  }

  .big-box .right {
    display: none;
  }

  .big-box .left {
    display: none;
  }
}